<template>
	<div class="myTeamList">
		<div class="memberTitle flex" style="justify-content: space-between;">
			<div>我的联系人</div>
			<div class="flex">
				<el-form :inline="true" :model="queryData" class="demo-form-inline">
					<el-form-item label="审核情况">
						<el-select v-model="queryData.state" placeholder="审核情况">
							<el-option label="全部" value=""></el-option>
							<el-option label="已认证" value="SUCCESS"></el-option>
							<el-option label="认证中" value="PROCESS"></el-option>
							<el-option label="认证失败" value="FAIL"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="关键字">
						<el-input v-model="queryData.condition" placeholder="请输入关键字"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button type="primary" icon="el-icon-search" @click="eliconsearch">搜索</el-button>
					</el-form-item>
				</el-form>
			</div>
		</div>
		<div class="menberContent">
			<el-table ref="multipleTable" :data="pageData.items" style="width: 100%">
				<el-table-column prop="friendName" label="姓名"></el-table-column>
				<el-table-column prop="jobNumber" label="工号"></el-table-column>
				<el-table-column prop="checkState" label="认证情况">
					<template slot-scope="scope">
						{{ scope.row.checkState=='SUCCESS'?'已认证':'未认证' }}
					</template>
				</el-table-column>
				<el-table-column prop="mainTeamName" label="主团队">
					<template slot-scope="scope">
						{{ scope.row.mainTeamName?scope.row.mainTeamName:'暂无主团队' }}
					</template>
				</el-table-column>
				<el-table-column prop="departmentName" label="现加入部门">
					<template slot-scope="scope">
						{{ scope.row.departmentName?scope.row.departmentName:'暂无部门' }}
					</template>
				</el-table-column>
				<el-table-column prop="dutiesName" label="职务">
					<template slot-scope="scope">
						{{ scope.row.dutiesName?scope.row.dutiesName:'暂无职务' }}
					</template>
				</el-table-column>
				<el-table-column prop="dutyName" label="岗位">
					<template slot-scope="scope">
						{{ scope.row.dutyName?scope.row.dutyName:'暂无岗位' }}
					</template>
				</el-table-column>
				<el-table-column label="操作" width="180">
					<template slot-scope="scope">
						<el-button type="text" @click="toTop(scope.row)">置顶</el-button>
						<el-button type="text" @click="toMessage(scope.row)">聊天</el-button>
						<el-button type="text" @click="exitTeam(scope.row)" class="deleteBtn">删除好友</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagina-tion :totalNum="pageData.totalNum" @paginaClick="paginaClick"></pagina-tion>
		</div>
		<!-- 添加好友弹窗 -->
		<el-dialog title="新增好友" :visible.sync="addMenberDialog">
			<el-table :data="allowMenberData.items" ref="addMenberTable" height="50rem">
				<el-table-column property="friendName" label="姓名"></el-table-column>
				<el-table-column property="companyName" label="主团队"></el-table-column>
				<el-table-column property="dutiesName" label="职务">
					<template slot-scope="scope">
						{{scope.row.dutiesName?scope.row.dutiesName:'暂无职务'}}
					</template>
				</el-table-column>
				<el-table-column property="address" label="岗位">
					<template slot-scope="scope">
						<div v-if="scope.row.postEntityList && scope.row.postEntityList.length > 0">
							<div v-for="posts in scope.row.postEntityList" :key="posts.id">{{ posts.labelName }}</div>
						</div>
						<div v-else>暂无岗位</div>
					</template>
				</el-table-column>
				<el-table-column property="address" label="操作">
					<template slot-scope="scope">
						<el-button type="text" @click="applyFor(scope.row)">申请</el-button>
					</template>
				</el-table-column>
			</el-table>
			<pagina-tion :totalNum="allowMenberData.totalNum" @paginaClick="dialogpaginaClick"></pagina-tion>
		</el-dialog>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
				tableData: [],
				pageData: '',
				queryData: {
					userId: this.$store.state.user.userInfo.id,
					condition: '', //筛选条件 只能筛选姓名或者工号
					state: '', //筛选状态条件 这里筛选的是 平台审核 PROCESS:审核中SUCCESS:审核通过
					userState: 1,
					page: 1,
					pageSize: $globalData.pageSize
				},
				// 认证状态数据
				attestationState: $globalData.attestationState,
				// tableSelectionChange: '' // 表格单选或者多选的数据
				// 添加好友弹窗
				addMenberDialog: false,
				// 添加好友弹窗数据
				adddepartmentMenberDataIsNotAdministrator: [{}],
				allowMenberData: '' // 添加好友弹窗数据
			}
		},
		mounted() {
			this.userId = this.$store.state.user.userInfo.id
			this.getCompanyList()
			this.$store.commit('set_linkIndex', 11)
		},
		methods: {

			paginaClick(val) {
				// 好友列表分页组件
				this.queryData.page = val
				this.getCompanyList()
			},
			eliconsearch() {
				// 搜索
				this.queryData.page = 1
				this.getCompanyList()
			},
			getCompanyList() {
				// 获取用户所有联系人
				this.$request.postForm(this.$api.getMyFriend, this.queryData).then(res => {
					if (res.code == 200) {
						this.pageData = res.data
						// console.log(res.data)
					}
				})
			},
			toTop(row) {
				// 置顶联系人
				this.$request.postForm(this.$api.topMyContacts, {
					friendId: row.applyUserId,
					userId: this.userId
				}).then(res => {
					if (res.code == 200) {
						this.$message.success('置顶成功')
						this.getCompanyList()
					}
				})
			},
			toMessage(row) {
				// 聊天row.applyUserId
				// console.log(row)
				sessionStorage.setItem('applyUserId', row.applyUserId)
				sessionStorage.setItem('applyChatType', '0')
				const url = `/addresslist/interior/message?t=${new Date().getTime()}`
				this.$router.push(url)
			},
			settingZ() {
				// 新增联系人
				this.addMenberDialog = true
				this.getAllowMenber()
			},
			exitTeam(row) {
				// 删除联系人
				this.$confirm('确定要删除选中联系人吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.$request.postForm(this.$api.deleteFriend, {
						friendId: row.applyUserId,
						userId: this.userId
					}).then(res => {
						if (res.code == 200) {
							this.$message.success('删除成功')
							if(this.queryData.page > 1){
								this.queryData.page = Math.ceil((this.pageData.totalNum - 1) / $globalData.pageSize)
							}
							this.getCompanyList()
						}
					})
				})
			},
			getAllowMenber(pageNum = 1) {
				// 获取所有可添加用户
				this.$request.postForm(this.$api.queryOwner, {
					userId: this.userId,
					page: pageNum,
					pageSize: $globalData.pageSize
				}).then(res => {
					if (res.code == 200) {
						this.allowMenberData = res.data
						// console.log(res.data)
					}
				})
			},
			dialogpaginaClick(val) {
				// 弹窗分页组件
				this.getAllowMenber(val)
			},
			applyFor(row) {
				// 申请添加好友
				// console.log(row)
				this.$request.postForm(this.$api.addMyFriend, {
					friendId: row.friendId,
					userId: this.userId,
					state: 0
				}).then(res => {
					if (res.code == 200) {
						this.$message.success('申请成功，请等待朋友通过...')
						this.dialogpaginaClick(this.allowMenberData.currentPage)
					}
				})
			}
		}
	}
</script>

<style scoped="scoped">
	.memberTitle {
		color: #333333;
		font-size: 20px;
		padding: 20px;
	}
.deleteBtn{
		color: #F42929;
	}
	.menberContent {
		padding: 0 20px;
		padding-bottom: 20px;
	}

	.menberConTitle {
		width: 100%;
		background: #F3F3F3;
		text-align: left;
		padding: 5px 20px;
		margin-bottom: 20px;
	}

	.ztd {
		color: red;
	}

	.myTeamList>>>.el-dialog__footer {
		text-align: center;
	}
</style>
